<template>
   <div class="mywallet">
    <wxc-minibar backgroundColor="#E53935" textColor="#fff" title="我的钱包" leftButton="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/back_icon.png">
    <!-- <text style="font-family: PingFangSC-Medium;font-size: 34px;color: #fff;" slot="middle">我的钱包</text> -->
    <!-- <text slot="right" style="font-size: 28px;color: #fff;" @click="goparticulars()">明细</text> -->
    </wxc-minibar>
    <div class="wallet_info">
        <div class="wallet_info_item">
            <text style="font-size: 24px;color: #fff;margin-top:50px;">余额(元)</text>
        </div>
         <div class="wallet_info_item">
            <text style="font-family: Helvetica;font-size:90px;color: #fff;margin-top:5px;">{{moneyobj.capitalAvailable | tofixfilter}}</text>
        </div>
        <!-- <div class="wallet_info_item wallet_info_item_md">
            <text style="font-family: Helvetica;font-size: 40px;color: #F44521;">{{moneyobj.capitalpay | tofixfilter}}</text>
            <text style="font-size: 28px;color: #000000;margin-top:30px;">仅供消费余额</text>
            <div class="left_line"></div>
            <div class="right_line"></div>
        </div> -->
        <!-- <div class="wallet_info_item">
            <text style="font-family: Helvetica;font-size:30px;color:#fff;margin-top:10px">可提现余额 {{moneyobj.capitalAvailable | tofixfilter}}</text>
        </div> -->
    </div>
    <div class="wallet_list">
        <div class="wallet_list_item" @click="goparticulars()">
            <div class="flex_lf">
                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;" class="discover_item_title">收支明细</text>
            </div>
            <div class="flex_rt">
            <text class="discover_item_arrow">&#xe61c;</text>
            </div>
        </div>
        <!-- <div class="wallet_list_item" @click="gorecharge()">
            <div class="flex_lf">
                <image style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/recharge.png"></image>
                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;margin-left:30px;" class="discover_item_title">充值</text>
            </div>
            <div class="flex_rt">
                <text class="discover_item_arrow">&#xe61c;</text>
            </div>
         </div>
      <div class="wallet_list_item" @click="godeposit()">
        <div class="flex_lf">
            <image style="width:44px;height:42px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/deposit.png"></image>
            <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;margin-left:30px;" class="discover_item_title">提现</text>
        </div>
        <div class="flex_rt">
             <text class="discover_item_arrow">&#xe61c;</text>
         </div>
      </div> -->
      <div class="wallet_list_item" @click="gomybank()">
        <div class="flex_lf">
            <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;" class="discover_item_title">我的银行卡</text>
        </div>
        <div class="flex_rt">
           <text class="discover_item_arrow">&#xe61c;</text>
         </div>
      </div>
    </div>
    <div class="mywallt-bot">
        <div class="mywallt-item mywallt-deposit"   @click="godeposit()"><text class="mywallt-txt" style="color:#E53935">提现</text></div>
        <div class="mywallt-item mywallt-rechange"  @click="gorecharge()"><text class="mywallt-txt"  style="color:#fff">充值</text></div>
    </div>
   </div>
</template>

<script>
import { WxcMask } from 'weex-ui'
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import { getBaseUrl, serialize }  from "@/utils/index.js"

const navigator = weex.requireModule('navigator')
const modal = weex.requireModule("modal");
const storage = weex.requireModule('storage')
let myWalletIndex = new BroadcastChannel('app')

export default {
    data() {
        return {
            moneyobj:{
            capitalBalance:'',
            capitalAvailable:'',
            // capitalFrozen:''
            capitalpay:''
            },
            baseURL:''

        };
    },
    components:{
        WxcMask,
        WxcMinibar
    },
    filters: {
        tofixfilter: function(value) {
            if(Number(value)==0){
                return Number(value)+'.00'
            }else if(parseInt(value)==parseFloat(value)){
                return Number(value)+'.00'
            }else{
                return Number(value.toFixed(2))
            }
        }
    },
    created() {
        
        myWalletIndex.onmessage =  (event)=> {
            // 获取资金信息
            this.getPersonalDetails()
        }

        this.getPersonalDetails()

        this.baseURL = getBaseUrl(weex.config.bundleUrl, true)
    },
    methods: {
        // 获取缓存
        getItem (name) {
            return new Promise((resolve, reject)=>{
                storage.getItem(name, event => {
                    if (event.result === "success") {
                        resolve(event.data);
                    } else {
                        reject("获取数据失败");
                    }
                })
            })
        },


         // 获取资金信息
        getPersonalDetails() {
            this.getItem('personalDetails').then( (value) => {
                // 昵称， 头像，总资金, 积分
                let {  capitalAvailable, capitalOnlyConsume} = JSON.parse(value)
                
                // this.moneyobj.capitalBalance =  +capitalBalance ||'0.00'
                this.moneyobj.capitalAvailable = +capitalAvailable ||'0.00'
                this.moneyobj.capitalpay = +capitalOnlyConsume ||'0.00' //仅供消费余额


            })
        },

      

        alert(title, msg) {
            this.alertCode = true
            this.content= title

            setTimeout(()=>{
                this.alertCode = false
            },2000)
        },
        gomybank(){
            navigator.push({
                'url': this.baseURL + 'views/mywallet/bankcardlist.js',
                'animated': 'true'
            })
        },
        goparticulars(){
            navigator.push({
                'url': this.baseURL + 'views/mywallet/income_expenses.js',
                'animated': 'true'
            })
        },
        gorecharge(){
            navigator.push({
                'url': this.baseURL + 'views/mywallet/recharge.js',
                'animated': 'true'
            })
        },
        godeposit(){
            navigator.push({
                'url': this.baseURL + 'views/mywallet/deposit.js',
                'animated': 'true'
            })
        }
    }
};
</script>

<style scoped>
.mywallt-bot{
    position:fixed;
    left:0;
    bottom:0;
    width:750px;
    height:100px;
    background-color: #fff;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
}
.mywallt-item{
    width:280px;
    height:70px;
    justify-content: center;
    align-items: center;
}
.mywallt-deposit{
    
    border-width: 1px;
    border-style: solid;
    border-color: #E53935;
    
}
.mywallt-rechange{
   
    background-color: #E53935;
   
}
.mywallt-txt{
    font-size: 32px;
}
  .mywallet{
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #F5F5F5;
  }
  .wallet_info{
      width: 750px;
      height: 320px;
    
      background-color: #E53935; 
      flex-direction: column;
  }
  .wallet_info_item{
      width:750px;
      align-items: center;
  }
  .wallet_info_item_md{
      position: relative;
  }
  .left_line{
      position: absolute;
      top: 120px;
      margin-top: -21px;
      left: 0;
      width: 2px;
      height: 43px;
      background-color:#D1D1D1;
  }
  .right_line{
      position: absolute;
      top: 120px;
      margin-top: -21px;
      right: 0;
      width: 2px;
      height: 43px;
      background-color:#D1D1D1;
  }
  .wallet_list_item{
      width: 750px;
      height: 112px;
      border-bottom-width: 2px;
      border-bottom-style: solid;
      border-bottom-color:rgb(245,245,245);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: #ffffff;
  }
  .wallet_list{
      margin-top: 24px;
  }
  .flex_lf{
     display: flex;
     flex-direction: row;
     margin-left: 32px;
     align-items: center;
     
  }

  .flex_rt {
    justify-content: flex-end;
    text-align: right;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex: 60%;
    margin-right: 32px;
}
  
.discover_item_arrow {
  font-family: iconfttf;
  font-size: 26px;
  color: #d8d8d8;
}
</style>
